import React from 'react';
import { Progress, Button, WingBlank, WhiteSpace } from 'antd-mobile';

class Progresss extends React.Component {
  state = {
    percent: 50,
  };
  add = () => {
    let p = this.state.percent + 10;
    if (this.state.percent >= 100) {
      p = 100;
    }
    this.setState({ percent: p });
  }
  clear = () => {
    let p = this.state.percent - 10;
    if (this.state.percent <= 0) {
      p = 0;
    }
    this.setState({ percent: p });
  }

  render() {
    const { percent } = this.state;
    return (
      <div className="progress-container">

        <Progress percent={30} position="fixed" />

        <div style={{ height: 18 }} />


        <Progress percent={40} position="normal" unfilled={false} appearTransition />


        <div className="show-info">
          <div className="progress"><Progress style={{background:"skyblue",borderRadius:10}}
            barStyle={{height:10,fontSize:20,borderColor:"red"}}
          percent={percent} position="normal" appearTransition /></div>
          <div aria-hidden="true">{percent}%</div>
        </div>
        <WhiteSpace size="xl" />
        <WingBlank>
          <Button onClick={this.add}>(+)10</Button>
          <Button onClick={this.clear}>(-)10</Button>
        </WingBlank>
      </div>
    );
  }
}

export default Progresss;